<template>
  <div class="home">
    <!-- 搜索部分 -->
    <div class="header-search">
      <!-- 搜索框部分 -->
      <div class="search" @click="search">
        <img src="@/assets/icons/搜索.png" alt="" />
        <p>搜索商品</p>
      </div>
      <!-- 定位部分 -->
      <div class="location" @click="location">
        <p>{{city}}</p>
        <img src="@/assets/icons/地址下拉.png" alt="" />
      </div>
    </div>
    <!-- 广告 -->
    <div class="banner">
      <!-- 广告轮播图 -->
      <div class="banner-c banxin">
        <van-swipe indicator-color="#FFFFFF">
          <van-swipe-item v-for="item in bannerList" :key="item.id">
            <img lazy-load :src="item.image_url" class="bannerImg" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 分类 -->
    <div class="category">
      <van-grid clickable :column-num="5" :border="false" class="cate-content">
        <van-grid-item @click="gocategory(1005000)" class="cate-item">
          <img src="@/assets/icons/家居.png" alt="" class="icon-img" />
          <p class="cate-name">家居</p>
        </van-grid-item>
        <van-grid-item @click="gocategory(1005001)" class="cate-item">
          <img src="@/assets/icons/餐厨.png" alt="" class="icon-img" />
          <p class="cate-name">餐厨</p>
        </van-grid-item>
        <van-grid-item @click="gocategory(1005002)" class="cate-item">
          <img src="@/assets/icons/服装.png" alt="" class="icon-img" />
          <p class="cate-name">服装</p>
        </van-grid-item>
        <van-grid-item @click="gocategory(1008000)" class="cate-item">
          <img src="@/assets/icons/旅行.png" alt="" class="icon-img" />
          <p class="cate-name">旅行</p>
        </van-grid-item>
        <van-grid-item @click="gocategory(1019000)" class="cate-item">
          <img src="@/assets/icons/兴趣.png" alt="" class="icon-img" />
          <p class="cate-name">兴趣</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 品牌制造商 -->
    <div class="banxin">
      <!-- 品牌制造商直供 -->
      <h2 class="brand-title">
        <router-link :to="{ name: 'brand' }" class="brand-link">
          品牌制造商直供
        </router-link>
      </h2>
      <van-grid clickable :column-num="2" class="band">
        <van-grid-item
          :to="{ name: 'brandDetail', params: { id: item.id } }"
          v-for="item in brandList"
          :key="item.id"
          class="band-item"
        >
          <img :src="item.new_pic_url" alt="图片未找到" class="band-img" />
          <p class="band-name">{{ item.name }}</p>
          <p class="band-price">{{ item.floor_price }}</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 新品首发 -->
    <div class="newgoods">
      <div class="banxin" @click="gogoods('isNew')">
        <img
          src="http://jinglins.gitee.io/bufan-tesco-mall/assets/new-product-pic-ab17c35e.png"
          alt=""
          style="width: 100%"
        />
      </div>
      <div class="new-container">
        <ul class="newlist">
          <li
            v-for="item in newGoods"
            :key="item.id"
            @click="goodDetail(item)"
            class="newitem"
          >
            <div class="img-box">
              <img :src="item.list_pic_url" alt="" />
            </div>

            <p class="new-name name">{{ item.name }}</p>
            <p class="new-brief brief">{{ item.goods_brief }}</p>
            <p class="new-price price">￥{{ item.retail_price }}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="hotgoods">
      <div class="banxin" @click="gogoods('isHot')">
        <img
          src="http://jinglins.gitee.io/bufan-tesco-mall/assets/hot-recom-pic-743969c3.png"
          alt=""
          style="width: 100%"
        />
      </div>
      <div class="new-container">
        <ul class="newlist">
          <li
            v-for="(item, index) in hotGoods"
            :key="index"
            @click="goodDetail(item)"
            class="newitem"
          >
            <img :src="item.list_pic_url" alt="" />

            <p class="new-name name">{{ item.name }}</p>
            <p class="new-brief brief">{{ item.goods_brief }}</p>
            <p class="new-price price">￥{{ item.retail_price }}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 专题精选 -->
    <div>
      <div class="topic-home">
        <h2>专题精选</h2>
      </div>
      <div class="topic-container">
        <ul class="topiclist">
          <li
            v-for="item in topicList"
            :key="item.id"
            class="topicitem"
            @click="godetail(item.id)"
          >
            <img class="topic-img" :src="item.item_pic_url" alt="" />
            <p class="topic-title title">
              {{ item.title }}
              <span class="topic-price">{{ item.price_info }}起</span>
            </p>
            <p class="topic-subtitle subtitle">
              {{ item.subtitle }}
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 居家好物 -->
    <div v-for="(item, index) in newCategoryList" :key="index" class="nice">
      <h2>
        <div class="h2-text">
          {{ item.name }}好物
        </div>
        <div class="line" :style="colors[index]"></div>
      </h2>
      <van-grid :border="false" :column-num="2" :center="false" :gutter="10" class="bigBox">
        <van-grid-item
          v-for="good in item.goodsList"
          :key="good.id"
          @click="goodDetail(good)"
          class="nice-card"
        >
          <van-image :src="good.list_pic_url" class="nice-img" />
          <p class="nice-name">{{ good.name }}</p>
          <p class="nice-price">￥{{ good.retail_price }}</p>
        </van-grid-item>
        <van-grid-item class="nice-card">
          <div class="last-card">
            <p class="nice-title">{{ item.name }}好物</p>
            <img src="@/assets/icons/下一步.png" alt="" class="next-img" />
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { index } from '@/api/home/index.js'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: 'HomeView',
  setup () {
    const store = useStore()
    const router = useRouter()
    const brandList = ref([])
    const bannerList = ref([])
    const newGoods = ref([])
    const hotGoods = ref([])
    const topicList = ref([])
    const newCategoryList = ref([])
    const colors = ref([
      'background-image:linear-gradient(135deg, #296AFF 0%, #52C5FF 100%)',
      'background-image:linear-gradient(140deg, #FCA334 0%, #FDD036 100%)',
      'background-image:linear-gradient(-41deg, rgba(149,255,0,0.95) 0%, #4FCB11 100%)',
      'background-image:linear-gradient(-41deg, rgba(68,240,255,0.95) 0%, #009AD0 100%)',
      'background-image:linear-gradient(90deg, #8B3AF7 17%, #F16CFF 83%)',
      'background-image:linear-gradient(90deg, #FF74A5 18%, #FFBFCD 83%)',
      'background-image:linear-gradient(144deg, #5C51EB 0%, #A097FF 100%)',
      'background-image:linear-gradient(-40deg, #FFC781 0%, #FF9650 100%)',
      'background-image:linear-gradient(-41deg, rgba(196,222,37,0.95) 0%, #4AB216 100%)'
    ])
    const gogoods = (val) => {
      router.push({ name: 'goods', params: { val: val } })
    }
    store.commit('keepOpenId', '18239442370')
    const goodDetail = (obj) => {
      router.push({ name: 'categoryDetail', params: { id: obj.id } })
    }
    const gocategory = (id) => {
      router.push({ name: 'secCategory', params: { id: id } })
    }
    const godetail = (id) => {
      router.push({ name: 'topicDetail', params: { id: id } })
    }
    const search = () => {
      router.push('/search')
    }
    const location = () => {
      router.push({ name: 'location' })
    }
    const city = store.state.city
    index().then(res => {
      console.log(res)
      bannerList.value = res.banner
      brandList.value = res.brandList
      newGoods.value = res.newGoods
      hotGoods.value = res.hotGoods
      topicList.value = res.topicList
      newCategoryList.value = res.newCategoryList
    })
    return {
      bannerList,
      gocategory,
      brandList,
      newGoods,
      gogoods,
      goodDetail,
      hotGoods,
      topicList,
      godetail,
      newCategoryList,
      colors,
      search,
      location,
      city
    }
  }
}
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.topic-home{
  padding:40px 0;
  text-align: center;
}
.home{
  margin-bottom: 120px;
}
.header-search{
  width: 710px;
  margin: 0 auto;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  .search {
    display: flex;
    width: 539px;
    height: 70px;
    background: #f8f8f8;
    border-radius: 35px;
    align-items: center;
    img {
      width: 42px;
      height: 42px;
      margin-left: 30px;
    }
    p {
      font-size: 28px;
      color: #b4b4b4;
      letter-spacing: 0;
      font-weight: 400;
      margin-left: 22px;
    }
  }
  .location {
    margin-left: 40px;
    width: 128px;
    display: flex;
    //justify-content: space-between;
    align-items: center;
    p {
      width: 100px;
      height: 70px;
      font-size: 30px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
      line-height: 70px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: right;
    }
    img {
      margin-left: 13px;
      width: 15px;
      height: 13px;
      line-height: 70px;
      //vertical-align: middle;
    }
  }
}
.banxin {
  width: 710px;
  margin: 20px auto;
  overflow: hidden;
}
.banner .bannerImg {
  width: 710px;
  height: 343px;
}
.cate-content {
  margin: 47px 20px 50px;
}
.brand-title {
  margin: 41px auto 33px;
  text-align: center;
  .brand-link {
    font-size: 38px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
    height: 53px;
    line-height: 53px;
  }
}
.band {
  width: 710px;
  height: 402px;
  overflow: hidden;
}
.band-item {
  position: relative;
  width: 350px;
  height: 196px;
}

.band-item .band-img {
  width: 350px;
  height: 196px;
}
.band-item p {
  position: absolute;
}
.band-name {
  left: 23px;
  top: 30px;
  font-size: 30px;
  height: 42px;
  line-height: 42px;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 210px;
}
.band-price {
  left: 23px;
  top: 72px;
  font-size: 24px;
  height: 33px;
  line-height: 33px;
  color: #999999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 210px;
}
.new-name {
  font-size: 30px;
  height: 42px;
  line-height: 42px;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 210px;
  margin: 0 auto;
  text-align: left;
}
.new-brief {
  font-size: 24px;
  height: 33px;
  line-height: 33px;
  color: #999999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 210px;
  margin: 0 auto;
}

.newlist {
  display: flex;
  justify-content: space-between;
  width: 1119px;
}
.hotgoods .newlist {
  width: 1399px;
}
.price {
  font-size: 24px;
  height: 33px;
  line-height: 33px;
  color: #9e4242;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 210px;
  margin: 0 auto;
  text-align: left;
  padding-top: 23px;
}
.new-container {
  overflow: scroll;
}
.newlist .newitem {
  width: 279px;
  border-right: 1px solid rgba(151,151,151,.2);
  margin: 20px 0;
}
.newitem:last-child {
  border-right: 0;
}
.img-box{
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}
.newitem img {
  width: 200px;
  height: 200px;
}
//专题精选
.topic-container {
  .topiclist {
    display: flex;
    overflow: scroll;
    .topicitem {
      margin-left: 20px;

      .topic-img {
        width: 556px;
        height: 309px;
      }
      .topic-title {
        font-size: 30px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        text-align: left;
        height: 42px;
        line-height: 42px;
        margin-top: 21px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        span {
          float: right;
          font-size: 24px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 400;
        }
      }
      .topic-subtitle {
        font-size: 24px;
        color: #999999;
        letter-spacing: 0;
        font-weight: 400;
        height: 33px;
        line-height: 33px;
        text-align: left;
        margin-top: 12px;
        margin-bottom: 12px;
        width: 216px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .topicitem:last-child {
      margin-right: 20px;
    }
  }
}
//分类 样式
//.category {
//  .cate-content {
//    .cate-item {
//    }
//  }
//}
//分类图标
.icon-img {
  width: 69px;
  height: 69px;
}
//分类标题
.cate-name {
  font-size: 26px;
  color: #666666;
  letter-spacing: 0;
  font-weight: 400;
  margin-top: 16px;
}
//居家好物
.nice {
  background-color: #000;
  overflow: hidden;
  h2 {
    font-size: 38px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 600;
    height: 53px;
    line-height: 53px;
    padding-bottom: 36px;
    padding-top: 61px;
    position: relative;
    text-align: center;
    z-index:1;
    background-color: #f8f8f8;
    .h2-text{
      z-index: 3;
      //background: none;
    }
    .line {
      width: 81px;
      height: 13px;
      position: absolute;
      top: 97px;
      left: 40%;
      z-index: 2;
    }
  }
  .bigBox{

    .nice-card {
      width: 340px;
      .nice-img {
        width: 340px;
        height: 340px;
      }

      .nice-name {
        width: 340px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        text-align: left;
        font-size: 26px;
        color: #333333;
        font-weight: 500;
        margin-top: 17px;
        height: 37px;
        line-height: 37px;
      }
      .nice-price {
        text-align: left;
        font-size: 26px;
        color: #9e4242;
        letter-spacing: 0;
        font-weight: 400;
        margin-top: 5px;
        margin-bottom: 44px;
        height: 37px;
        line-height: 37px;
      }
      .last-card {
        width: 100%;
        height: 100%;
        display: flex;
        align-content: center;
        justify-content: center;
        flex-wrap: wrap;
        .nice-title {
          text-align: center;
          font-size: 32px;
          color: #666666;
          letter-spacing: 0;
          font-weight: 400;
          width: 100%;
          height: 45px;
          line-height: 45px;
        }
        .next-img {
          display: block;
          width: 58px;
          height: 58px;
          margin-top: 21px;
        }
      }
    }
  }
}
</style>
